import React from 'react';
import {Form, Row, Col, Button, InputNumber, message ,Radio,Input,Checkbox,Upload} from 'antd';
import { withRouter } from 'react-router-dom'
import {injectIntl} from 'react-intl';
import axios from 'axios';
import SCSelect from '../../components/pickCity/SCSelect'
import moment from 'moment';


const FormItem = Form.Item;
const createForm = Form.create;
const RadioGroup = Radio.Group;

@withRouter
class AddCompany extends React.Component {
    constructor(props) {
        super(props);
        this.common = this.props.intl.messages.common;
        this.state = {
            flag:false,
            type:"0"
        }

    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((errors, values) => {
            if (!!errors) {
                console.log('Errors in form!!!');
                return;
            }
            console.log(values);
            this.setState({
                flag:true
            })
        });
    }

    normFile = (e) => {
        if (Array.isArray(e)) {
          console.log('Upload event:', e);
          return e;
        }
        return e && e.fileList;
      }

    typeNum = (e) => {
        console.log('radio checked', e.target.value);
        this.setState({
            type: e.target.value,
        });
      }

    render() {
        const props = {
            name: 'file',
            action: axios.defaults.baseURL+'/uploadFile.do?resultFlag=2',
            headers: {
                authorization: 'authorization-text',
            },
            onChange:(info)=> {
                console.log(info)
                if (info.file.status === 'done') {
                    message.success(`${info.file.name} 成功`);
                }
                if (info.file.status === 'error') {
                    message.error(`${info.file.name} 失败`);
                }
            },
        };
        const formItemLayout = {
            labelCol: {
              xxl: { span: 8 },
              xl: { span: 7 },
            },
            wrapperCol: {
              xxl: { span: 16 },
              xl: { span: 10 },
            },
          };
          const tailFormItemLayout = {
            wrapperCol: {
              xl: {
                span: 10,
                offset: 7,
              }
            },
          };
        const {getFieldDecorator} = this.props.form;
        return (
            <div>
                <form form={this.props.form}>
                    <FormItem
                    {...formItemLayout}
                    label={"负责人账号"}
                    >
                        {getFieldDecorator('account')(
                            <Input disabled={this.state.flag}/>
                        )}
                    </FormItem>
                    <FormItem
                     {...formItemLayout}
                     label={"身份证号"}
                    >
                        {getFieldDecorator('idNo')(
                            <Input disabled={this.state.flag}/>
                        )}
                    </FormItem>
                    <FormItem
                    {...formItemLayout}
                    label="账号归属"
                    >
                    {getFieldDecorator('type',{initialValue:this.state.type})(
                        <RadioGroup disabled={this.state.flag} onChange={this.typeNum}>
                        <Radio value="0">企业</Radio>
                        <Radio value="1">个人</Radio>
                        </RadioGroup>
                    )}
                    </FormItem>
                    {this.state.type==="0"&&<FormItem
                     {...formItemLayout}
                     label={"组织机构代码"}
                    >
                        {getFieldDecorator('orgCode')(
                            <Input disabled={this.state.flag}/>
                        )}
                    </FormItem>}
                    {/* 详情========== */}
                    {this.state.flag&&<div>
                        <FormItem
                        {...formItemLayout}
                        label={"上级用户"}
                        >
                            {getFieldDecorator('shangji')(
                                <Input />
                            )}
                        </FormItem>
                        <FormItem
                        {...formItemLayout}
                        label={"企业类型"}
                        >
                            {getFieldDecorator('saasType')(
                                <SCSelect data={[{id:0,name:"ceshi"}]} />
                            )}
                        </FormItem>
                        <FormItem
                        {...formItemLayout}
                        label={"SAAS权限"}
                        >
                            {getFieldDecorator('auth')(
                                <SCSelect data={[{id:0,name:"ceshi"}]} />
                            )}
                        </FormItem>
                        <FormItem
                        {...formItemLayout}
                        label={"企业编码"}
                        >
                            {getFieldDecorator('id')(
                                <Input />
                            )}
                        </FormItem>
                        <FormItem
                        {...formItemLayout}
                        label={"企业名称"}
                        >
                            {getFieldDecorator('name')(
                                <Input />
                            )}
                        </FormItem>
                        <FormItem
                        {...formItemLayout}
                        label={"公司地址"}
                        >
                            {getFieldDecorator('companyAddress')(
                                <Input />
                            )}
                        </FormItem>
                        <FormItem
                        {...formItemLayout}
                        label={"公司电话"}
                        >
                            {getFieldDecorator('companyPhone')(
                                <Input />
                            )}
                        </FormItem>
                        <FormItem
                        {...formItemLayout}
                        label={"负责人姓名"}
                        >
                            {getFieldDecorator('chiefName')(
                                <Input />
                            )}
                        </FormItem>
                        <FormItem
                        {...formItemLayout}
                        label={"负责人电话"}
                        >
                            {getFieldDecorator('chiefPhone')(
                                <Input />
                            )}
                        </FormItem>
                        <FormItem
                        {...formItemLayout}
                        label={"用户数上限"}
                        >
                            {getFieldDecorator('userCntLimit')(
                                <InputNumber />
                            )}
                        </FormItem>
                        <FormItem 
                        {...formItemLayout}
                        label={"星卡"}
                        >
                        {getFieldDecorator('card', {
                            valuePropName: 'checked',
                        })(
                            <Checkbox><a>支持刷卡充电</a></Checkbox>
                        )}
                        </FormItem>
                        <FormItem 
                        {...formItemLayout}
                        label={"星卡"}
                        >
                        {getFieldDecorator('sendSms', {
                            valuePropName: 'checked',
                        })(
                            <Checkbox><a>发送短信通知</a></Checkbox>
                        )}
                        </FormItem>
                        <FormItem 
                            {...formItemLayout}
                            label={"附件"}
                            >
                            {getFieldDecorator('fileName',{
                                valuePropName: 'fileList',
                                getValueFromEvent: this.normFile,
                            })(
                                <Upload {...props}>
                                    <Button icon="upload" >上传</Button>
                                </Upload>
                            )}
                        </FormItem>
                        
                    </div>}
                    {/* 详情========== */}
                    <FormItem
                    {...tailFormItemLayout}
                    >
                        <Button className={"ant-btn-84"} type={'primary'} onClick={this.handleSubmit}>下一步</Button>
                    </FormItem>
                </form>
            </div>
        )
    }
}

AddCompany = createForm()(AddCompany);
export default injectIntl(AddCompany)
